import React from 'react';
import moment from 'moment';
import { Button } from 'antd';
import EditPage from './edit';
import { TablePro } from '@/components';
import { useRef, useCallback } from 'react';
import getOrderList from '@/service/order/list';
import { payChannelMap, payStatusMap, orderTypeMap } from '@/utils/map';

import styles from './styles.less';

const Article = () => {

  const tabRef = useRef<Function>();

  const onRefresh = useCallback(() => {
    tabRef.current?.();
  },[]);

  const columns = [
    {
      title: '用户手机号',
      dataIndex: 'mobile',
    },
    {
      title: '套餐名称',
      dataIndex: 'packagesName',
    },
    {
      title: '支付金额',
      dataIndex: 'payPrice',
    },
    {
      title: '支付渠道',
      dataIndex: 'payChannel',
      render: (type: string) => (
        payChannelMap[type]
      )
    },
    {
      title: '订单号',
      dataIndex: 'orderNo',
    },
    {
      title: '订单状态',
      dataIndex: 'status',
      render: (type: string) => (
        payStatusMap[type]
      )
    },
    {
      title: '订单类型',
      dataIndex: 'type',
      render: (type: string) => (
        orderTypeMap[type]
      )
    },
    {
      title: '过期时间',
      dataIndex: 'expiryTime',
      render: (date: number) => (
        moment(date * 1000).format('YYYY-MM-DD HH:mm:ss')
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createdTime',
      render: (date: number) => (
        moment(date * 1000).format('YYYY-MM-DD HH:mm:ss')
      ),
    },
    {
      title: '支付时间',
      dataIndex: 'paymentTime',
      render: (date: number) => (
        moment(date * 1000).format('YYYY-MM-DD HH:mm:ss')
      ),
    },
  ];

  return (
   <>
     <div className={styles.header}>
       <EditPage onSuccess={onRefresh}>
         <Button type="primary">添加充值记录</Button>
       </EditPage>
     </div>
     <TablePro
       columns={columns}
       scroll={{ x: 1500 }}
       service={getOrderList}
       onLoad={cb => tabRef.current = cb}
     />
   </>
  );
};

export default Article;
